import {  Input, Component, OnInit,OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-chart-line-diagram',
  templateUrl: './chart-line-diagram.component.html',
  styleUrls: ['./chart-line-diagram.component.css']
})
export class ChartLineDiagramComponent implements OnInit,OnChanges {
  @Input() data: any;
  public chartOptions
  public componentName:string="standardPowerUtilizationRate";
  public _chart: any;
  ngOnChanges(changes: SimpleChanges): void {
    if(changes['data']){
      this.fillChart(this.data);
    }
  }



  ngOnInit() {
    this.fillChart(this.data);
  }
  public fillChart(data:any[]){

    let opts: any = {
      chart: {
        type: 'spline',
        backgroundColor: 'transparent',
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: '',
      },
      xAxis: {
        categories: [],
        lineWidth:2,
        labels: {
          enabled: false
        },
        tickWidth: 0,
        gridLineWidth: 0
      },
      yAxis: {
        title: {
          text: ''
        },
        lineWidth:2,
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        valueSuffix: '单位'
      },
      plotOptions: {
        spline: {
          marker: {
            radius: 3,
          }
        }
      },
      legend: {
        align: 'left',
        verticalAlign: 'bottom',
        x:100,
        y:0,
        itemWidth:160,
        borderWidth: 0,
        maxHeight:40,
        margin:20,
        navigation:{
          activeColor:'#3e82ed',
          arrowSize:13,
          style: {
            fontWeight: 'bold',
            color: '#333',
            fontSize: '13px'
          }
        }
      },
      series: data
    }
    this.chartOptions = opts
  }

}
